<template>
    <view class="bg-content">
        <div style="background-color: white;">
            <u-dropdown ref="uDropdown" :border-bottom="true">
                <u-dropdown-item title="筛选数据">
                    <view class="slot-content">
                        <view style="padding: 15px; background-color: white;">
                            <u-form ref="validateFormRef" :model="validateForm.value" :label-width="150">
                                <u-form-item label="餐饮号" prop="orderSequenceNumber">
                                    <u-input v-model="validateForm.value.orderSequenceNumber" placeholder="请输入餐饮号"/>
                                </u-form-item>
                                <u-form-item label="状态" prop="status">
                                    <u-input type="select" :select-open="validateForm.controls.status.isShow"
                                             v-model="validateForm.controls.status.textDesc"
                                             placeholder="请选择状态" @click="validateForm.controls.status.isShow = true; $forceUpdate();"></u-input>
                                </u-form-item>
                            </u-form>
                            <div style="display: flex;">
                                <div style="width: 100%;">
                                    <u-button type="primary" @click="validateForm.resetValues()">重置过滤条件</u-button>
                                </div>
                                <div style="width: 100%;">
                                    <u-button type="error" @click="validateForm.doSearch(_self, tbStoreOrderSequenceNumberList)">搜索</u-button>
                                </div>
                            </div>
                        </view>
                    </view>
                </u-dropdown-item>
            </u-dropdown>
        </div>

        <u-select mode="single-column" label-name="name" value-name="code" :mask-close-able="false" v-if="validateForm.controls.status.isShow"
                  v-model="validateForm.controls.status.isShow" :list="validateForm.controls.status.options"
                  :default-value="validateForm.controls.status.defaultValue"
                  @cancel="validateForm.controls.status.isShow = false; $forceUpdate();"
                  @confirm="UFormUtil.selectSingleColumnConfirm($event, validateForm.controls.status)"></u-select>


        <scroll-view scroll-x="true">
            <div class="table table-bordered" style="width: 800px; text-align: center; background: white;">
                <div class="tr">
                    <div class="td text-center bold">餐饮号二维码</div>
                    <div class="td text-center bold">餐饮号（桌号/订单序号）</div>
                    <div class="td text-center bold">状态</div>
                    <div class="td text-center bold">操作</div>
                </div>
                <div class="tr" v-for="(item, index)  in tbStoreOrderSequenceNumberList" :key="item.id">
                    <div class="td">
                        <div style="padding: 15px 0px 15px 10px; text-decoration: underline;" @click="showQRCode(item)">
                            点击获取餐饮号二维码
                        </div>
                    </div>
                    <div class="td">{{item.orderSequenceNumber}}</div>
                    <div class="td">{{item.statusText}}</div>
                    <div class="td">
                        <div style="margin-top: 10px; text-decoration: underline;"
                             @click="navigateTo(`/pages/sub/sub2-store-platform/store-platform/store-platform-store-manage/store-platform-store-order-sequence-number/sequence-number-edit/index`, null, item)">
                            编辑
                        </div>
                        <div style="margin-top: 10px; text-decoration: underline;" @click="deleteItem(item, index)">
                            删除
                        </div>
                    </div>
                </div>
            </div>
        </scroll-view>

        <div style="padding-top: 10px; padding-bottom: 10px;">
            <u-loadmore :status="pagination.status" bg-color="#eeeeee"/>
        </div>

        <div style="padding-bottom: 60px;"></div>

        <div class="custom-bottom-button">
            <label @click="navigateTo('/pages/sub/sub2-store-platform/store-platform/store-platform-store-manage/store-platform-store-order-sequence-number/store-platform-store-order-sequence-number-add/index')">
                添加餐饮号
            </label>
        </div>

        <!--显示二维码-->
        <u-popup v-model="isShowQrCode" mode="bottom" :closeable="true">
            <view style="text-align: center;">
                <div style="padding: 5px; margin-bottom: 10px; background: white;" v-if="selectedItem">
                    餐饮号：{{selectedItem ? selectedItem.orderSequenceNumber : ''}}
                </div>
                <div style="display: flex;">
                    <div style="width: 100%;">
                    </div>
                    <div>
                        <canvas id="qrcode" canvas-id="qrcode" style="width: 154px;height: 154px;" @click="previewImage()"/>
                    </div>
                    <div style="width: 100%;">
                    </div>
                </div>
                <div style="padding: 5px; margin-top: 10px; background: white;">
                    提示：点击二维码生成图片，长按图片可保存到本地
                    <div style="color: red;">制作海报提示：请将二维码保存到本地并在应用市场下载“海报”相关第三方软件进行制作。</div>
                </div>
            </view>
        </u-popup>
    </view>
</template>

<script>

    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {TbStoreOrderSequenceNumberService} from "@/dev/services/tb-store-order-sequence-number.service";
    import {SysDictionaryService} from "@/dev/services/sys-dictionary.service";
    import {UFormUtil} from "@/dev/core/utils/u-form.util";
    import uQRCode from '@/pages/sub/sub2-store-platform/static/plugins/uqrcode.js'

    export default {
        data() {
            return {
                validateForm: {
                    value: {
                        storeId: this.globalVariable.userInfo.tbStore.id,
                        orderSequenceNumber: '',
                        status: ''
                    },
                },
                isShowQrCode: false,
                selectedItem: null,
                tbStoreOrderSequenceNumberList: []
            }
        },
        onReady() {
            const _self = this;
            new SysDictionaryService().optionList('status', null).then(result => {
                UFormUtil.setOptions(_self.validateForm.controls.status, [{code: '', name: '全部'}, ...result]);
                _self.$forceUpdate();
            });
        },
        onShow() {
            this.doRefresh(this.tbStoreOrderSequenceNumberList);
        },
        // 上拉加载
        onReachBottom: function () {
            if (this.pagination.hasNextPage) {
                this.doInfinite()
            }
        },
        methods: {
            /**
             * 显示二维码
             */
            showQRCode(item) {
                this.selectedItem = item;
                this.isShowQrCode = true;
                uQRCode.make({
                    canvasId: 'qrcode',
                    componentInstance: this,
                    text: item.qrCode,  // 二维码内容
                    size: 150,
                    margin: 10,
                    backgroundColor: '#ffffff',
                    foregroundColor: '#000000',
                    fileType: 'jpg',
                    correctLevel: uQRCode.errorCorrectLevel.H,
                    success: res => {
                        console.log(res)
                    }
                })
            },
            previewImage() {
                // 在自定义组件下，当前组件实例的 this，以操作组件内 <canvas> 组件
                uni.canvasToTempFilePath({
                    canvasId: 'qrcode',
                    success: function (res) {
                        // 在H5平台下，tempFilePath 为 base64
                        console.log(res.tempFilePath)

                        // 预览图片
                        uni.previewImage({
                            urls: [res.tempFilePath],
                        });
                    }
                })
            },
            doInfinite() {
                const _self = this;
                new TbStoreOrderSequenceNumberService().findTableListCascade({
                    pagination: this.pagination,
                    data: Object.assign({}, this.validateForm.value)
                }).then(result => {
                    console.log(_self.tbStoreOrderSequenceNumberList);
                    _self.pagination.refreshPage(result);
                    _self.tbStoreOrderSequenceNumberList = [..._self.tbStoreOrderSequenceNumberList, ...result.list];
                })
            },
            deleteItem(item, index) {
                const _self = this;
                CommonUtil.alert({
                    title: '提示！',
                    content: '确定删除吗？',
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            new TbStoreOrderSequenceNumberService().deleteTbStoreOrderSequenceNumber(item).then(result => {
                                _self.tbStoreOrderSequenceNumberList.splice(index, 1);
                                CommonUtil.toast('删除成功');
                            });
                        }
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>
